<template>
  <!-- 添加或修改盘点计划对话框 -->
  <el-dialog :title="title" v-model="open" width="400px" append-to-body>
    <selectMaterialForm ref="selectMaterialForm" @ok="selectOk"></selectMaterialForm>
    <div v-loading="loading">
      <el-form ref="form" :model="form" :rules="rules" label-width="90px" :inline="true">
        <el-form-item label="领用人:" prop="personAssigner">
          <el-select v-model="form.personAssigner" clearable reserve-keyword placeholder="请选择领用人">
            <el-option v-for="item in userList" :key="item.userId" :label="item.nickName" :value="item.userId" />
          </el-select>
        </el-form-item>
      </el-form>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="submitForm">确定</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script>
import selectMaterialForm from '@/views/goods/quote/modules/selectMaterialForm';
import modelMixin from '@/mixins/modelMixin'
import clue, { getClueCode } from '@/api/goods/clue'
import { getClueSourceAllList } from '@/api/goods/clueSource'
import ImagePreview from '@/components/ImagePreview/index.vue';
import { listUser } from '@/api/system/user';
import {
  provinceAndCityData,
  pcTextArr,
  regionData,
  pcaTextArr,
  codeToText,
} from "element-china-area-data";

export default {
  name: 'addForm',
  components: {
    selectMaterialForm, ImagePreview
  },
  mixins: [modelMixin],
  data() {
    return {
      open: false,
      title: '添加线索池',
      funcObj: clue,
      multiple: false,
      selectedRows: [],
      form: {},
      supplierOptions: [],//客户
      quotationSchemeOptions: [],//方案
      dateRange: [],
      rules: {
        personAssigner: [
          {
            required: true,
            message: '请选择领用人',
            trigger: 'blur'
          }
        ],
        quotationStatus: [
          {
            required: true,
            message: '请选择报价状态',
            trigger: 'blur'
          }
        ],
        schemeId: [
          {
            required: true,
            message: '请选择报价方案',
            trigger: 'blur'
          }
        ],
        schemeId: [
          {
            required: true,
            message: '请选择报价方案',
            trigger: 'blur'
          }
        ],
      },
      queryParams: {
        categoryId: '',
        categoryName: ''
      },
      active: 1,
      baseInput: 200,
      data: [],
      dateRange: [],
      dataSource: [],
      loading: false,
      quote_status: [],//报价状态
      options: regionData,
      selectedOptions: [],
      userList: [],
    };
  },

  methods: {
    add() {
      this.open = true;
      this.title = '添加线索池',
        this.form = {}
      this.dataSource = []
      this.addInit()
      this.getClueSourceAllList()
    },
    edit(row) {
      this.open = true;
      this.title = '线索分配',
        this.form = {}
      this.dataSource = []
      this.listSysUser()
      this.getDetail(row)
    },
    detailAfter() {
      this.dataSource = this.form.jzgClueMaterialVoList
    },
    cancel() {
      this.open = false;
    },
    categoryChange(value) {
      this.form.categoryId = value;
    },
    handleSelectionChange(val) {
      this.selectedRows = val;
      this.multiple = val.length > 0;
    },
    selectHandle(row) {
      return 1;
    },
    handleAdd() {
      this.$refs.selectMaterialForm.show();
    },

    selectOk(data) {
      this.dataSource = data.map(v => {
        let data = {
          ...v,
          clueId: this.$route.query.id || '',
          goodsId: v.id,
          price: v.retailPrice,
          surrogateStatus: v.supplyMode,
          shelfStatus: v.auditStatus,
          costPrice: v.costPrice,
          wholesalePrice: v.wholesalePrice
        }
        delete data.id
        return data
      });
    },
    remoteMethod(query, listKey, key) {
      const optionKey = listKey + 'Options';
      if (query !== '') {

        this[optionKey] = this[listKey + 'List'].filter(item => {
          return item[key].toLowerCase()
            .indexOf(query.toLowerCase()) > -1;
        });
      } else {
        this[optionKey] = this[listKey + 'List'];
      }

    },

    // 获取线索单号
    addInit() {
      getClueCode().then(res => {
        this.form.clueNumber = res.data;
      })
    },
    classifyForm() {
      this.form.jzgClueMaterialList = this.dataSource
      // // 价格
      this.form.amount = this.dataSource.reduce((total, item) => {
        return total + +item.amount
      }, 0)
      this.form.clueStatus = 1
    },

    /**
     * @批量删除
     */
    handleBatchDelete() {
      if (this.selectedRows.length == 0) {
        this.$modal.msgError('请选择要删除的数据');
        return;
      }
      var ids = this.selectedRows.map(item => item.goodsId).join(',');
      this.$modal.confirm('是否删除选中的数据?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.dataSource = this.dataSource.filter(item => !ids.includes(item.goodsId));
      }).catch(() => {
        this.$modal.messageError({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    quantityChange(value, row, index) {
      row.amount = row.price * value
      this.dataSource.splice(index, 1, row)

    },
    getClueSourceAllList() {
      getClueSourceAllList().then(res => {
        this.clueSource = res
      })
    },

    // 获取后台用户
    listSysUser() {
      listUser().then(res => {
        this.userList = res.rows
      }).catch(err => {
        console.log(err)
      });
    },
  }
};
</script>

<style lang="scss" scoped></style>